<template>
	<!-- 弹出层 -->
	<div class="modal fade" id="selectRoleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="margin-top: 160px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" @click="closeSelectRoleModal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title" id="myModalLabel">选择需复用的角色</h4>
				</div>
				<div class="modal-body">
					<div class="form-horizontal">
						<div class="form-group" style="text-align: center;margin: 0 auto;">
							<select class="form-control" v-model="role" style="display: inline-block;width: 65%;height: 40px;margin: 20px 0;">
								<option value="">请选择</option>
								<option v-for="(row,index) in roleResourceList" :key="index" v-bind:value="row">{{row.roleName}}</option>
							</select>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn checkedBtn" v-show="selectRoleBtnShow" @click="selectRole">确定</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      role: "",
      roleResourceList: [],
      selectRoleBtnShow: true,
    };
  },
  mounted() {
    this.initRoleResource();
  },
  watch: {},
  methods: {
    selectRole() {
      if (!this.role) {
        layar.msg("请选择角色！");
        return;
      }
      this.$store.commit("set_selectRoleInfo", {
        roleId: this.role.id,
        roleName: this.role.roleName,
      });
      this.closeSelectRoleModal();
    },
    initRoleResource() {
      var _self = this;
      var url = _self.utilHelper.apiUrl + "/api/getChannelRoleList";
      var params = {};
      var body = {};
      body.params = params;
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        _self.roleResourceList = resData.channelRoleList;
      });
    },
    closeSelectRoleModal() {
      this.role = "";
      $("#selectRoleModal").modal("hide");
    },
  },
};
</script>